@import '../basic/globalVar.scss';
@mixin animation-base($className, $keyframeName) {
  $enter-active: #{$className + '-enter-active'};
  $leave-active: #{$className + '-leave-active'};
  $animation-enter: #{$keyframeName + 'In'};
  $animation-leave: #{$keyframeName + 'Out'};

  @at-root {
    .#{$enter-active} {
      animation-name: $animation-enter;
      animation-duration: $--animation-time;
      animation-fill-mode: both;
      @content;
    }

    .#{$leave-active} {
      animation-name: $animation-leave;
      animation-duration: $--animation-time;
      animation-fill-mode: both;
      @content;
    }
  }
}
.slide-transition {
  transition: height $--animation-time ease-in-out;
}
